<template>
	<!-- <template v-if="useMediaSize">
		<match-media orientation="portrait">
			<view class="dam-flex_column dam-page portrait">
				<slot>
				</slot>
			</view>
		</match-media>
		<match-media orientation="landscape">
			<view class="dam-flex_column dam-page landscape">
				<slot></slot>
			</view>
		</match-media>
	</template>
	<template v-else> -->
	<view class="dam-flex_column dam-page">
		<slot></slot>
	</view>
	<!-- </template> -->
</template>

<script lang="ts" setup>
	import { usePageStore } from "@/dam_uni_frame/stores/stores"
	import { storeToRefs } from 'pinia'
	const pageStore = usePageStore();
	const { windowH, windowW } = storeToRefs(pageStore);

	const props = defineProps({
		// 	/**
		// 	 * 是否用媒体查询方法设置宽高，使用media的方式效率高，但部分第三方组件不支持；使用插槽時，watch还会走两次
		// 	 */
		// 	useMediaSize: {
		// 		type: Boolean,
		// 		default: true
		// 	},
		height: {
			type: String,
			default: "100vh"
		},
		width: {
			type: String,
			default: "100vw"
		}
	})
</script>

<style lang="scss" scoped>
	@import "/dam_uni_frame/styles/dam_theme_common.scss";

	.dam-page {
		overflow: hidden;
		height: v-bind('props.height');
		width: v-bind('props.width');
		// @include themify() {
		// 	background-color: themed("color_bg");
		// }
	}

	.dam-page.portrait {
		height: 100vh;
		width: 100vw;
	}

	.dam-page.landscape {
		height: 100vh;
		width: 100vw;
	}

	// 如果要做pad版本，可以参考这个
	// .dam-page.landscape {
	// 	height: 100vw;
	// 	width: 100vh;
	// }
</style>